<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>student</title>
    <link rel="stylesheet" href="/bootstrap.min.css">
    <script src="/jquery.min.js"></script>

    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3668154_uo0wheulgli.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }

        body {
            display: flex;
            margin: 0;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            height: 100vh;
            width: 100vh;
            color: white;
            font-family: 'Lato', sans-serif;
            font-weight: 300;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .login {
            padding: 60px 35px 35px 35px;
            margin: 0 auto;
            width: 400px;
            height: 550px;
            border-radius: 10px;
            filter: blur(0.4px);
            background: radial-gradient(circle, #555555, #535353, #505050, #4e4e4e, #4c4c4c);
            box-shadow: 0 20px 20px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 70px 50px rgba(0, 0, 0, .4), 30px 50px 50px rgba(0, 0, 0, 0.2), -30px 50px 50px rgba(0, 0, 0, 0.2), inset 20px 0 60px rgba(0, 0, 0, .1), inset -20px 0px 60px rgba(0, 0, 0, .1);
        }

        .header {
            background: url("../../images/logo.png");
            margin: -10px auto;
            width: 152px;
            height: 116px;
            border-radius: 50%;
        }

        .title {
            padding-top: 24px;
            text-align: center;
            font-size: 28px;
            letter-spacing: 0.5px;
        }

        .title_one {
            padding-top: 7px;
            text-align: center;
            font-size: 15px;
            letter-spacing: 3px;
            text-transform: uppercase;
            font-weight: bold;
        }

        .infor {
            padding: 8px 5px 10px 5px;
            width: 100%;
        }

        .infor input {
            padding: 10px 10px 10px 5px;
            border: none;
            outline: none;
            color: white;
            background: none;
            font-size: 18px;
            font-family: 'Lato', sans-serif;
        }

        .username,
        .password {
            display: block;
            border-bottom: 1px solid #b3b3b3;
            margin-top: 20px;
        }

        ::placeholder {
            opacity: 1;
            color: white;
            font-size: 20px;
            font-weight: 300;
        }

        .iconfont icon-zhanghao,
        iconfont icon-mima1 {
            height: 22px;
            margin-bottom: -3px;
            margin-right: 10px;
        }

        .btn {
            letter-spacing: 1px;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
            margin-top: 11px;
            background: radial-gradient(circle, #24cfaa, #26c5a3, #28bb9c, #29b294, #2aa88d);
            border: none;
            width: 100%;
            height: 60px;
            border-radius: 5px;
            color: white;
            text-align: center;
            outline: none;
            cursor: pointer;
            font-size: 22px;
            font-family: 'Lato', sans-serif;
        }

        .btn:hover {
            background: radial-gradient(circle, #2fdbb6, #32d6b3, #32c9a8, #36c7a7, #38bb9f);
        }

        .btn:active {
            background: radial-gradient(circle, #1da88a, #1ea084, #32c9a8, #36c7a7, #38bb9f);
        }

        .forgetpwd {
            padding-top: 20px;
            text-align: center;
        }

        .forgetpwd a {
            text-decoration: none;
            color: white;
            font-size: 20px;
        }
    </style>
</head>

<body>

<div class="login">
    <div class="header">
     </div>
    <div class="title">Red Stapler</div>
    <div class="title_one">
        Beta
    </div>
    <form action="#" class="infor">
        <div class="username iconfont icon-zhanghao">
            <input type="text" class="user" id="username" name="username" placeholder="Username">
        </div>

        <div class="password iconfont icon-mima1">

            <input type="password" class="pwd" id="password" name="password" placeholder="Password">
        </div>
    </form>
    <button class="btn" onclick="Login();">LOGIN</button>
    <div class="forgetpwd">
        <a href="#"> Forget password?</a>
    </div>
</div>
</body>

<!--发送请求返回数据-->
<script src="/bootstrap.min.js"></script>

<script>
    function Login() {
        let name = $("#username").val().trim()
        let password = $("#password").val().trim()
        $.ajax({
            url: "/webapi/login/user",
            data: {
                username: name,
                password: password,
            }
        }).done(function (res) {
            if (res >= 0) {
                window.location.href = "/student/list"
            } else {
                alert("出错了，请确认你的用户名和密码")
            }

        })
    }
</script>

</body>

</html>